<template>
  <div class="page network-setting">
    <div class="scroll-view">
      <customHeader middleTitle="配置Wi-Fi" @leftCallBack="goBack"/>
      <div class="page-body">
        <div class="content">
          <div class="top"></div>
          <p class="f28">长按电源键码先声开机，提示网络连接成功；</p>
          <div class="tag">热点配网</div>
          <div class="f32">
            <p>1）长按配网键，提示已进入配网模式；</p>
            <p>2）手机设置-无线局域网/WLAN-连接“码先声III”分享的热点</p>
            <div class="btn-wrap"><div class="btn" @click="openWifi">第二步 去配置</div></div>
            <p>3）手机浏览器输入“192.168.1.1”，输入WIFI名称及密码</p>
            <div class="btn-wrap"><div class="btn" @click="openWeb">第三步 去配置</div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {Toast, MessageBox} from "mint-ui";
import customHeader from "@/components/header/header";
import jsBridge from "@/tools/jsBridge.js";

export default {
  components: {
    customHeader
  },
  data() {
    return {
      
    };
  },
  methods: {
    goBack() {
      if(String(this.$route.query.close) == "true") {
        jsBridge.closeWindow();
      }else {
        this.$router.back();
      }
    },
    openWifi() {
      jsBridge.openWifi();
    },
    openWeb() {
      jsBridge.openWindow({
        needTitle: true,
        title: "配置Wi-Fi",
        url: 'http://192.168.1.1/',
        target: "server",
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "qrCodeSound";
.content {
  color: #333;
  @include remCalc(padding, 0, 30);
  .f28 {
    @include remCalc(font-size, 28);
  }
  .f32 {
    @include remCalc(font-size, 32);
  }
  p {
    @include remCalc(margin-bottom, 30);
  }
  .top {
    @include remCalc(height, 440);
    @include remCalc(margin, 0, -30, 30);
    box-shadow: 0 1px 0 0 rgba(221,221,221,0.50), 0 -1px 0 0 rgba(221,221,221,0.50);
    background: #F4F7FA url(../../../static/images/mxs3.png) center no-repeat;
    @include remCalc(background-size, 549, 323);
  }
  .btn-wrap {
    margin-top: 0;
    @include remCalc(margin-bottom, 30);
  }
  .tag {
    @include remCalc(width, 160);
    @include remCalc(height, 44);
    @include remCalc(line-height, 44);
    @include remCalc(font-size, 28px);
    @include remCalc(border-radius, 6px);
    @include remCalc(margin, -10, 0, 20);
    color: #449CFE;
    text-align: center;
    background: rgba(69,157,255,0.10);
  }
}
</style>